<style>
	.content {
		border: 1px solid#999;
		border-radius: 16px;
		margin-bottom: 20px;
		padding: 10px;
	}

	.listItem1 {
		flex: 1;
		margin: 10px;
		background: #fff;
		padding: 10px;
		border-radius: 16px;
		text-align: center;
	}

	.listItem1 div {
		text-align: center;
	}

	.listTitle {
		background-image: linear-gradient(to right, #3a3ef4, #3a3ef4);
		color: #fff;
		border-radius: 40px;
		padding: 6px 10px;
		margin: 10px 0;
	}
</style>
<template>
	<div>
		<!-- <div class="displayFlexBet bgfff pad10" style="margin-bottom: 10px;border-radius:8px">

			<el-button @click="visible1 = true,form=$options.data().form" icon="el-icon-plus" type="primary"
				size="mini">新增效益</el-button>
		</div> -->

		<div class="displayFlexBet pad10 bgfff color555" style="border-radius:8px">
			<div style="flex:1" class="">类型</div>
			<div style="flex:1" class="">预计经济效益</div>
			<div style="flex:1" class="">实际经济效益</div>
			<div style="flex:1" class="">预计环境效益</div>
			<div style="flex:1" class="">实际环境效益</div>
			<div style="flex:1" class="">操作</div>
		</div>

		<div class="bgfff mt10" style="border-radius:8px">
			<el-empty v-if="dataList.length == 0" />
			<div class="displayFlexBet pad10 color555 point" v-for="(item,index) in dataList" :key="index"
				style="border-bottom:1px solid#F8F7F9" @click="gotoDetail(item)">
				<div style="flex:1">{{item.projectTypeStr }}</div>
				<div style="flex:1">{{item.planEconEffectStr }}</div>
				<div style="flex:1" class="">{{item.actualEconEffectStr}}</div>
				<div style="flex:1" class="">{{item.planEnvEffectStr}}</div>
				<div style="flex:1" class="">{{item.actualEnvEffectStr}}</div>

				<div style="flex: 1;display: flex;align-items: center;">
					<img src="@/assets/sIcon68.png" style="cursor: pointer;width: 15px;height: 18px;"
						@click.stop="edit(item)" class="" />
					<!-- <img src="@/assets/sIcon69.png" style="cursor: pointer;width: 15px;height: 18px;"
						@click.stop="deleteThis(item)" class="ml20" /> -->
				</div>

			</div>
		</div>

		<!--新增基础信息-->
		<el-dialog title="实施方案" :visible.sync="visible1" width="30%" top="2%">
			<el-form ref="form" :model="form" label-width="120px" :rules="formRules">
				<el-form-item label="项目类型" prop="projectType">
					<el-select v-model="form.projectType" placeholder="项目类型" style="width: 100%;">
						<el-option label="清洁生产" value="CLEAN_PRODUCE"></el-option>
						<el-option label="减量化" value="REDUCTION"></el-option>
						<el-option label="无害化" value="HARMLESS"></el-option>
						<el-option label="资源化" value="RESOURCE"></el-option>
						<el-option label="信息化" value="INFO"></el-option>
						<!-- <el-option label="项目类型7" value="7"></el-option> -->
					</el-select>
				</el-form-item>

				<el-form-item label="预计经济效益" prop="planEconEffectList">
					<div class="displayFlexBet mb10" v-for="(item,index) in form.planEconEffectList" :key="index">
						<el-input v-model="form.planEconEffectList[index]" placeholder="预计经济效益"
							style="width: calc(100% - 0px);"></el-input>
						<div style="width: 70px;" class="displayFlex">
							<i class="ml10 el-icon-circle-plus-outline" style="color: brown;"
								@click="form.planEconEffectList.push('')"></i>
							<i class="ml10 el-icon-remove-outline" v-if="index> 0" @click="form.planEconEffectList.splice(index)"></i>
						</div>

					</div>
				</el-form-item>

				<el-form-item label="实际经济效益" prop="actualEconEffectList">
					<div class="displayFlexBet mb10" v-for="(item,index) in form.actualEconEffectList" :key="index">
						<el-input v-model="form.actualEconEffectList[index]" placeholder="实际经济效益"
							style="width: calc(100% - 0px);"></el-input>
						<div style="width: 70px;" class="displayFlex">
							<i class="ml10 el-icon-circle-plus-outline" style="color: brown;"
								@click="form.actualEconEffectList.push('')"></i>
							<i class="ml10 el-icon-remove-outline" v-if="index> 0" @click="form.actualEconEffectList.splice(index)"></i>
						</div>
					</div>
				</el-form-item>

				<el-form-item label="预计环境效益" prop="planEnvEffectList">
					<div class="displayFlexBet mb10" v-for="(item,index) in form.planEnvEffectList" :key="index">
						<el-input v-model="form.planEnvEffectList[index]" placeholder="预计环境效益"
							style="width: calc(100% - 0px);"></el-input>
						<div style="width: 70px;" class="displayFlex">
							<i class="ml10 el-icon-circle-plus-outline" style="color: brown;"
								@click="form.planEnvEffectList.push('')"></i>
							<i class="ml10 el-icon-remove-outline" v-if="index> 0" @click="form.planEnvEffectList.splice(index)"></i>
						</div>
					</div>
				</el-form-item>

				<el-form-item label="实际环境效益" prop="actualEnvEffectList">
					<div class="displayFlexBet mb10" v-for="(item,index) in form.actualEnvEffectList" :key="index">
						<el-input v-model="form.actualEnvEffectList[index]" placeholder="实际环境效益"
							style="width: calc(100% - 0px);"></el-input>
						<div style="width: 70px;" class="displayFlex">
							<i class="ml10 el-icon-circle-plus-outline" style="color: brown;"
								@click="form.actualEnvEffectList.push('')"></i>
							<i class="ml10 el-icon-remove-outline" v-if="index> 0" @click="form.actualEnvEffectList.splice(index)"></i>
						</div>
					</div>
				</el-form-item>
			</el-form>

			<div style="text-align: center;margin-top: 30px;" slot="footer">
				<el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
				<el-button @click="visible1 = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		components: {

		},
		data() {
			return {
				params: {},
				form: {
					planEconEffectList: [''],
					actualEconEffectList: [''],
					planEnvEffectList: [''],
					actualEnvEffectList: ['']
				},
				formRules: {
					planEconEffectList: [{
						required: true,
						message: '项目类型',
						trigger: 'blur',
					}],
					actualEconEffectList: [{
						required: true,
						message: '实施时间',
						trigger: 'change',
					}],
					planEnvEffectList: [{
						required: true,
						message: '方案概述',
						trigger: 'blur',
					}],
					actualEnvEffectList: [{
						required: true,
						message: '方案详情',
						trigger: 'blur',
					}]
				},
				visible1: false,
				dialogVisible: false,
				dialogVisible2: false,
				dataList: [],
				outletList: [],
				videoUrl: '',
				flvPlayer: null,
				areaList: [],
				areaTargetList: [],
				loading: false,
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.getDataList()
		},


		methods: {

			edit(item) {
				if (item.planEconEffectList.length == 0) item.planEconEffectList = ['']
				if (item.actualEconEffectList.length == 0) item.actualEconEffectList = ['']
				if (item.planEnvEffectList.length == 0) item.planEnvEffectList = ['']
				if (item.actualEnvEffectList.length == 0) item.actualEnvEffectList = ['']
				that.form = JSON.parse(JSON.stringify(item))
				that.visible1 = true
			},

			deleteThis(item) {
				let noticeText = "是否确认删除此方案"

				this.$alert(noticeText, '', {
					confirmButtonText: '确定',
					callback: action => {
						if (action == "confirm") {
							that.ajax({
								url: '/noWaste/project/logicDelete?ticketId=' + that
									.params.ticketId,
								data: {
									ticketId: that.params.ticketId,
									id: item.id
								},
								contentType: 'application/x-www-form-urlencoded',
								success: function(result) {
									that.getDataList()
								},
							})
						}
					}
				});
			},

			onSubmit() {
				that.$refs.form.validate((valid) => {
					if (valid) {
						that.loading = true
						that.ajax({
							url: '/noWaste/effect/save?ticketId=' + that.params.ticketId,
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.$message.success("保存成功！")
									that.form = {}
									that.visible1 = false
									that.loading = false
									that.getDataList()
								}
							},
						})
					}
				})
			},

			getDataList() {
				that.ajax({
					url: '/noWaste/effect/getList?ticketId=' + that.params.ticketId +
						"&pageNum=1&pageSize=99999",
					data: JSON.stringify({
						ticketId: that.params.ticketId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data
						}
					},
				})
			},


		}
	}
</script>


<style scoped>
	.display_Flex_Bet {
		display: flex;
		justify-content: space-between;
	}
</style>